<template>
  <TitleCard :title="titleCard" :showMore="showMore">
    <UserInfos ref="userInfos" :infos="infoRow" class="mb20"></UserInfos>
    <TitleCard
      title="第三方短信平台对接号码设置"
      :showMore="false"
      :isSwitch="false"
      :type="'threeCard'"
    >
      <Table
        class="mt20"
        ref="table"
        :options="fields"
        :tableValue="tableValue"
        :customSlotOpt="slotOpt"
        :otherOpt="customOtherOpt"
        :rowSelection="null"
        @actionClick="handlerActionClick"
      ></Table>
    </TitleCard>
    <TitleCard
      title="第三方短信平台短信模板内容设置"
      :showMore="false"
      :isSwitch="false"
      :type="'threeCard'"
    >
      <Table
        class="mt20"
        ref="table"
        :options="modelfields"
        :tableValue="modeltableValue"
        :customSlotOpt="modelslotOpt"
        :otherOpt="modelCustomOtherOpt"
        :rowSelection="null"
        @actionClick="handlerActionClick"
      ></Table>
    </TitleCard>
    <EditModal
      v-if="isShowModal"
      @cancel="cancel"
      @addSuccess="addSuccess"
      :phones="phones"
      :id="id"
    ></EditModal>
    <EditModelModal
      v-if="isShowModelModal"
      @cancel="modelCancel"
      @addSuccess="modelAddSuccess"
      :template="template"
      :templateId="templateId"
    ></EditModelModal>
  </TitleCard>
</template>

<script>
import UserInfos from '../../components/userInfos/index.vue'
import Table from '../../components/table/index.vue'
import mixinsBackStack from '@/views/backstageSupport/mixins'
import { fields, modelfields, slotOpt, modelslotOpt,infoRow } from './configs/configs'
import EditModal from './components/editModal.vue'
import EditModelModal from './components/editModelModal.vue'
import { getMessagePlatformNumberList, getMessagePlatforContentList } from '@/api/messagePlatform.js'

export default {
  mixins: [mixinsBackStack],
  data() {
    return {
      slotOpt,
      fields,
      infoRow,
      modelfields,
      modelslotOpt,
      customOtherOpt: {
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        }
      },
      modelCustomOtherOpt: {
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        }
      },
      tableValue: [],
      modeltableValue:[],
      isShowModal: false,
      isShowModelModal: false,
      phones: [],
      id:'',
      template:'',
      templateId:''
    }
  },
  components: {
    Table,
    EditModal,
    UserInfos,
    EditModelModal
  },
  mounted() {
    this.initNumberTableValue()
    this.initContentTableValue()
  },
  methods: {
    async initNumberTableValue() {
      try {
        this.loadingTable(true) // 开启表格的加载动画
        const { rows, total } = await getMessagePlatformNumberList () // 请求表格数据接口
        rows.forEach(element => {
          element.phones = element.phones.split(",")
          element.phones = element.phones.join("<br>")
        });
        this.tableValue = rows
        this.customOtherOpt.pagination.total = total
      } catch (error) {
        this.$apiStatusHandler(99, error.msg) // 请求异常，则全局轻提示
      } finally {
        this.loadingTable(false)
      }
    },
    async initContentTableValue() {
      try {
        this.loadingTable(true) // 开启表格的加载动画
        const { rows, total } = await getMessagePlatforContentList() // 请求表格数据接口
        this.modeltableValue = rows
        this.modelCustomOtherOpt.pagination.total = total
      } catch (error) {
        this.$apiStatusHandler(99, error.msg) // 请求异常，则全局轻提示
      } finally {
        this.loadingTable(false)
      }
    },
    edit(row) {
      this.phones = row.phones.split("<br>") //html格式转为弹框需要格式
      this.phones = this.phones.reduce((pre,cur)=>{
        pre.push({
          phone:cur,
        })
        return pre
      },[])
      this.id = row.id
      this.isShowModal = true
    },
    cancel() {
      this.isShowModal = false
    },
    addSuccess() {
      this.isShowModal = false
      this.initNumberTableValue()
    },
    modelEdit(row) {
      this.template = row.template
      this.templateId = row.id
      this.isShowModelModal = true
    },
    modelCancel() {
      this.isShowModelModal = false
    },
    modelAddSuccess() {
      this.isShowModelModal = false
      this.initContentTableValue()
    },
  }
}
</script>
